<template>
  <div id="progress-container">
    <MaskContainer
      ref="MaskContainer"
      :main-style="{width: '540px', height: '200px'}"
      :has-btn="false"
      :has-close="true"
      :title="title"
      :hidden-close-fn="true"
      :progressing="progressing"
      @handelCancel="handelCancel"
    >
      <div class="import-progress">
        <span :title="msg" class="text">{{ percentage > 0 ? msg:!isStart?`正在${type === 1?'下载':'上传'}...`:`开始下载` }}</span>
        <el-progress :percentage="percentage" :stroke-width="10" :status="progressStatus" />
      </div>
      <div class="import-cancel-btn">
        <div style="flex:1;"/>
        <div v-if="isStart && type === 1" class="start btn" @click="startUpload">开始</div>
        <div class="btn" @click="cancelHttp">关闭</div>
      </div>
    </MaskContainer>
  </div>
</template>
<script>
import { getProcess } from '@/api/medium';
import MaskContainer from './MaskContainer';
export default {
  name: 'Progress',
  components: { MaskContainer },
  props: {
    title: {
      type: String,
      default: '标题'
    }
  },
  data() {
    return {
      customColor: '#6e8fa2',
      percentage: 0,
      msg: '',
      timer: '',
      progressStatus: null,
      // type  1:导出  2:导入
      type: '',
      uploadId: '',
      flag: true,
      progressing: false,
      isStart: true
    };
  },
  created() {
    this.$nextTick(() => {
      const body = document.querySelector('body');
      if (body.append) {
        body.append(this.$el);
      } else {
        body.appendChild(this.$el);
      }
    });
  },
  methods: {
    tabMaskShow(type) {
      this.type = type || 1;
      this.$refs.MaskContainer.tabMaskShow();
      this.initProcessOption('', 0);
      this.percentage = 0;
      this.uploadId = '';
    },
    // 点击开始后开始下载文件
    startUpload() {
      this.isStart = false;
      this.$parent.startExport();
    },
    // 上传钩子
    // 这是最先调用的方法
    beforeUpload(uploadId) {
      // this.tabMaskShow(type);
      this.uploadId = uploadId;
      this.progressing = true;
      this.getUploadProcess();
    },
    onSucess(message) {
      this.initProcessOption(message, 100, 'success');
      this.isStart = false;
    },
    onError(message) {
      this.initProcessOption(message, 100, 'exception');
    },
    onComplate(message) {
      // console.log('onComplate', message);
    },
    // 上传钩子 end
    initProcessOption(msg, percentage, progressStatus) {
      clearInterval(this.timer);
      if (percentage !== null) this.percentage = percentage;
      this.msg = msg;
      this.progressStatus = progressStatus || null;
      this.progressing = false;
    },
    // 获取进度
    getUploadProcess() {
      this.timer = setInterval(async() => {
        if (!this.flag) return false;
        try {
          this.flag = false;
          const result = await getProcess({ uploadId: this.uploadId });
          this.flag = true;
          if (this.msg !== '文件较大，拼命导入中，请半小时后进入系统查看导入结果') {
            if (result.code === 200) {
              this.percentage = result.data.percentage;
            }
            this.msg = result.data.message;
          }
          if (this.percentage === 100) {
            clearInterval(this.timer);
          }
        } catch (error) {
          this.flag = true;
          console.log(error);
        }
      }, 2000);
    },
    // 关闭弹窗
    handelCancel() {
      this.initProcessOption('', 0);
      this.percentage = 0;
      this.isStart = true;
    },
    closeMaskClose() {
      this.$refs.MaskContainer.closeShow();
      this.isStart = true;
    },
    // 中断请求
    cancelHttp() {
      this.$emit('cancelExportHttp');
      this.$emit('cancelImportHttp');
      this.isStart = true;
      this.$refs.MaskContainer.closeShow();
    }
  }
};
</script>
<style scoped lang="scss">
.import-progress {
  padding-left: 10px;
  display: flex;
  height: 74%;
  flex-direction: column;
  justify-content: center;
  .text {
    font-size: 12px;
    color: #999999;
    display: inline-block;
    margin-bottom: 8px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp:4;
    -webkit-box-orient: vertical;
  }
  // & ::v-deep {
  //   .el-progress-bar {
  //     padding-right: 30px;
  //     margin-right: -28px
  //   }
  //   .el-progress__text {
  //     top: -22px;
  //     right: 10px;
  //     position: absolute;
  //   }
  // }
}
.import-cancel-btn {
  display: flex;
  position: absolute;
  right: 10px;
  bottom: 10px;
  .btn {
    border: 1px solid #e4e4e4;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 80px;
    height: 32px;
    background: #fff;
    color: #515151;
    border-radius: 4px;
    font-size: 14px;
    line-height: 14px;
    &.disabled {
      cursor: not-allowed;
      opacity: 0.7;
    }
  }
  .start {
    margin-right: 10px;
    color: #406EFF;
  }
}
</style>
